/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="chart-info" :class="visibleClass">
    <el-tooltip effect="dark" content="项目整体信息" placement="bottom">
      <div class="panel_arrow" @click="handlerArrow">
        <i :class="['iconfont', visible ?  'icon-arrowon' : 'icon-arrowdown']"></i>
      </div>
    </el-tooltip>
    <div class="chart-row">
      <div class="chart-row-cell left">
          <v-chart auto-resize :options="chartOption1" ref="char-1" theme="macarons"/>
      </div>
      <div class="chart-row-cell middle">
          <v-chart auto-resize :options="chartOption2" ref="char-2" theme="macarons"/>
      </div>
      <div class="chart-row-cell right">
          <v-chart auto-resize :options="chartOption3" ref="char-3" theme="macarons"/>
      </div>
    </div>
    <div class="chart-row">
      <div class="chart-row-cell left">
          <v-chart auto-resize :options="chartOption4" ref="char-4" theme="macarons"/>
      </div>
      <div class="chart-row-cell middle">
          <v-chart auto-resize :options="chartOption5" ref="char-5" theme="macarons"/>
      </div>
      <div class="chart-row-cell right">
          <v-chart auto-resize :options="chartOption6" ref="char-6" theme="macarons"/>
      </div>
    </div>
  </div>
</template>

<script>
import ECharts from "vue-echarts";
import chartTheme from "../../utils/chartTheme.js";
import {
  reqHousetype,
  reqAccountmonthly,
  reqAnalysis,
  reqAccount,
  reqProject,
  reqCuscode
} from "../../api/index.js";
ECharts.registerTheme("macarons", chartTheme);

export default {
  data() {
    return {
      visible: false,
      chartOption1: {},
      chartOption2: {},
      chartOption3: {},
      chartOption4: {},
      chartOption5: {},
      chartOption6: {}
    };
  },
  computed: {
    visibleClass: function() {
      return this.visible ? "show" : "hide";
    }
  },
  methods: {
    handlerArrow() {
      this.visible = !this.visible;
    },
    async initChart1() {
      const res = await reqHousetype();
      let tempArr = [];
      let dataArr = [];
      for (let i of res.data.details) {
        tempArr.push(i.label);
        dataArr.push({ value: i.area, name: i.label });
      }
      let options = {
        title: {
          text: "房屋类型分析",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} 户 ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: tempArr
        },
        series: [
          {
            name: "资金使用情况",
            type: "pie",
            radius: ["40%", "60%"],
            avoidLabelOverlap: false,
            label: {
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "12",
                  fontWeight: "bold"
                }
              }
            },
            data: dataArr
          }
        ]
      };
      this.chartOption1 = options;
    },
    async initChart2() {
      const res = await reqAccountmonthly();
      let options = {
        title: {
          text: "月度资金使用情况"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: ["拨付", "实付"]
        },
        grid: {
          left: "0",
          right: "4%",
          bottom: "10%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.data.labels
        },
        yAxis: {
          name: "单位（元）",
          type: "value"
        },
        series: [
          {
            name: "拨付",
            type: "line",
            areaStyle: {},
            data: res.data.earmarked
          },
          {
            name: "实付",
            type: "line",
            areaStyle: {},
            data: res.data.payed
          }
        ]
      };
      this.chartOption2 = options;
    },
    async initChart3() {
      const res = await reqAnalysis();
      let options = {
        title: {
          text: "月进度分析"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : 签约 {c} 户"
        },
        legend: {
          data: ["户数"]
        },
        xAxis: {
          data: res.data.labels
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "户数",
            type: "bar",
            data: res.data.completed
          }
        ]
      };
      this.chartOption3 = options;
    },
    async initChart4() {
      const res = await reqAccount();
      var tempArr = [];
      tempArr.push({ value: res.data.details.payable.value, name: "应付" });
      tempArr.push({ value: res.data.details.payed.value, name: "待支付" });
      tempArr.push({ value: res.data.details.balance.value, name: "结余" });
      tempArr.push({ value: res.data.details.gap.value, name: "缺口" });
      let options = {
        title: {
          text: "资金使用情况",
          subtext: "累计已拨付" + res.data.details.earmarked.lable,
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}万元 ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["应付", "待支付", "结余", "缺口"]
        },
        series: [
          {
            name: "资金使用情况",
            type: "pie",
            radius: "55%",
            data: tempArr
          }
        ]
      };
      this.chartOption4 = options;
    },
    async initChart5() {
      const res = await reqProject();
      var labelArr = [];
      var percentArr = [];
      for (var i of res.data.details) {
        labelArr.push(i.shortTitle);
        percentArr.push((i.completed / i.planed) * 100);
      }
      let options = {
        title: {
          text: "项目完成进度"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : 已完成 {c}%"
        },
        legend: {
          data: ["进度"]
        },
        xAxis: {
          data: labelArr
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}%"
          }
        },
        series: [
          {
            name: "进度",
            type: "bar",
            data: percentArr
          }
        ]
      };
      this.chartOption5 = options;
    },
    async initChart6() {
      const res = await reqCuscode();
      let options = {
        title: {
          text: "劳务公司签约统计",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}"
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "10%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: "category",
          data: res.data.labels
        },
        series: [
          {
            name: "",
            type: "bar",
            data: res.data.value
          }
        ]
      };
      this.chartOption6 = options;
    }
  },
  components: {
    "v-chart": ECharts
  },
  mounted() {
    this.initChart1();
    this.initChart2();
    this.initChart3();
    this.initChart4();
    this.initChart5();
    this.initChart6();
  }
};
</script>

<style lang='less' scoped>
@import "../../utils/theme.less";
.chart-info {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  background: #fff;
  width: 100%;
  z-index: 99;
  transition: transform ease-out 0.3s;
}

.hide {
  transform: translate3d(0px, -100%, 0px);
}

.show {
  transform: translate3d(0px, 0px, 0px);
}

.panel_arrow {
  position: absolute;
  width: 94px;
  height: 18px;
  background: @primary;
  cursor: pointer;
  text-align: center;
  line-height: 18px;
  bottom: -18px;
  left: 50%;
  margin-left: -47px;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  z-index: 99;
  i {
    color: #fff;
  }
}

.chart-row {
  width: 100%;
  height: 300px;
  box-sizing: border-box;
  .chart-row-cell {
    display: inline-block;
    box-sizing: border-box;
    height: 100%;
  }
  .left,
  .right {
    width: 25%;
  }
  .middle {
    width: 50%;
  }
}
</style>
